<script>
import loginJs from "@/mixins/login.js"
const logoImg = require("../../../src/assets/images/title.png");

export default {
  name: "defaultLogin",
  mixins: [loginJs],
  data() {
    return {
      logoImg: logoImg,
    }
  },
  render() {
    return (
      <div class="login-bg-default">
        <div class="logo">
          <img src={this.logoImg} />
        </div>
        <div class="login-box">
          <c-form>
            <c-form-item class="username-form-item">
              <c-input
                v-model={this.userInfo.username}
                prefix-icon="bg-user"
                placeholder="请输入用户名"
                nativeOnKeydown={this.handleLogin.bind(this)}
              ></c-input>
            </c-form-item>
            <c-form-item class="pwd-form-item">
              <c-input
                v-model={this.userInfo.password}
                prefix-icon="bg-pwd"
                type="password"
                placeholder="请输入密码"
                nativeOnKeydown={this.handleLogin.bind(this)}
              ></c-input>
            </c-form-item>
            <c-form-item class="btn-form-item">
              <c-button
                disabled={this.disabled}
                on-click={this.handleLogin.bind(this, "userInfo")}
                nativeOnKeydown={this.handleLogin.bind(this)}
              >
                登 录
              </c-button>
            </c-form-item>
          </c-form>
        </div>
      </div>
    );
  }
};
</script>

<style lang="scss">
.login-bg-default {
  input:-internal-autofill-previewed,
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #fff !important;
    font-size: 16px;
    transition: background-color 5000s ease-in-out 0s !important;
  }
  left: 0;
  right: 0;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(~@/assets/images/bg-login.png) no-repeat center center fixed;
  background-size: 100% 100%;
  i {
    display: inline-block;
    background: url(~@/assets/images/xssprite.png);
    background-size: 420px 320px;
  }
  .logo {
    min-width: 580px;
    width: 100%;
    margin-top: 169px;
    display: flex;
    justify-content: center;
    img {
      width: 576px;
      height: 211px;
    }
  }
  .login-box {
    min-width: 580px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .el-form {
      width: 400px;
      height: 240px;
      // padding: 30px 0;
      background: url(~@/assets/images/xssprite.png) -10px -10px;
      background-size: 420px 320px;
      margin: 0 auto;
      justify-content: space-around;
      display: flex;
      flex-direction: column;
      padding: 20px 0;
      .el-form-item {
        width: 320px;
        margin: 0 auto;
        .el-form-item__content {
          line-height: 40px;
          .el-input {
            height: 40px;
            line-height: 40px;
            .el-input__inner {
              border: none;
              background: none;
              outline: none;
              border-radius: 0;
              height: 40px;
              font-size: 16px;
              font-family: MicrosoftYaHei-Bold;
              line-height: 28px;
              color: rgba(255, 255, 255, 1);
              opacity: 1;
            }
            .el-input__inner::placeholder {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(0, 162, 254, 1);
            }
            .bg-user {
              width: 20px;
              height: 20px;
              background-position: -222px -270px;
              vertical-align: middle;
            }
            .bg-pwd {
              width: 20px;
              height: 20px;
              background-position: -150px -270px;
              vertical-align: middle;
            }
          }
        }

        .el-button {
          float: right;
          border: none;
          width: 120px;
          height: 40px;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url(~@/assets/images/xssprite.png) -10px -270px;
          background-size: 420px 320px;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          color: rgba(0, 162, 254, 1);
          opacity: 1;
        }
      }
      .username-form-item,
      .pwd-form-item {
        .el-form-item__content {
          &::after {
            display: table;
            content: "";
            width: 320px;
            height: 2px;
            background: linear-gradient(
              360deg,
              rgba(0, 215, 254, 1) 0%,
              rgba(0, 163, 254, 1) 100%
            );
            opacity: 0.5;
          }
        }
      }
    }
  }
}
</style>
